<template>
  <div>
    <van-cell
      v-for="(item, index) in hightLightSuggestions"
      :key="index"
      icon="search"
      @click="$emit('update-keywords', suggestions[index])"
    >
      <template #title>
        <span v-html="item"></span>
      </template>
    </van-cell>
  </div>
</template>

<script>
// 当keywords发生变化的时候, 发生了什么
// 1.决定渲染搜索建议组件
// 2.监视keywords发生变化, 请求搜索建议
// 先变化再显示组件, 组件监视不到变化

// 防抖
// - 在频繁触发时, 间隔时间段内只执行一次
// 1. 用定时器包裹
// 2. 清除上一次的定时器
import { debounce } from 'lodash'
import { getSuggestionsAPI } from '@/api'
export default {
  props: {
    keywords: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      suggestions: []
    }
  },
  computed: {
    // map方法
    //  - 返回值 跟原数组长度一致的新数组

    // 动态正则
    //  - 字面量的正则 /a/ 缺点:正则公式写死的
    //  - RegExp --> regular expression  new RegExp(正则内容字符串,修饰符字符串)

    // 字符串的replace
    // 返回值:替换后的新字符串
    // - replace(子字符串,替换的字符串)
    // - replace(正则,替换的字符串)
    // - replace(正则,函数)  函数的返回值作为替换的结果, match函数的参数, 返回正则匹配的结果
    hightLightSuggestions() {
      const reg = new RegExp(this.keywords, 'ig')

      return this.suggestions.map((str) => {
        // item : Angular
        return str.replace(
          reg,
          (match) => `<span style="color:red">${match}</span>`
        )
      })
    }
  },
  watch: {
    // 监视属性
    // 1.函数式
    // 2.对象的写法
    // 3. 字符串的写法(也可以写在handler)
    //  - 在methods身上去找方法
    keywords: {
      handler: 'getSearchSuggestions',
      immediate: true
    }
  },
  // MVVM: 软件架构设计模式
  // gof: 23种设计模式 七大原则
  // 曾探: <JavaScript设计模式与开发实践>
  // 单一职责原则

  // 库:lodash
  // 工具库
  methods: {
    getSearchSuggestions: debounce(async function () {
      const { data } = await getSuggestionsAPI(this.keywords)

      this.suggestions = data.data.options.filter(Boolean)
    }, 300)
  }
}
</script>

<style></style>
